<template>
	<!-- @click="$emit('click')" -->
	<view v-if="isYGradient" class="btn-yellow-gradient" hover-class="btn-yellow-gradient-hover" @click.stop="onClick" :style="{fontSize:fontSize,margin:margin,width:width,height:height,borderRadius:parseInt(height)/2+'rpx',backgroundColor:bgColor,color:color,border:border}">
	  	<slot></slot>
	</view>
	<view v-else-if="isBGradient" class="btn-brown-gradient" hover-class="btn-brown-gradient-hover" @click.stop="onClick" :style="{fontSize:fontSize,margin:margin,width:width,height:height,borderRadius:parseInt(height)/2+'rpx',backgroundColor:bgColor,color:color,border:border}">
		<slot></slot>
	</view>
	<view v-else-if="isDGradient" class="btn-Deep-blue-gradient" hover-class="btn-Deep-blue-gradient-hover" @click.stop="onClick" :style="{fontSize:fontSize,margin:margin,width:width,height:height,borderRadius:parseInt(height)/2+'rpx',backgroundColor:bgColor,color:color,border:border}">
		<slot></slot>
	</view>
	<view v-else :class="isGradient?'btn-gradient':'btn'" :hover-class="isGradient?'btn-gradient-hover':'btn-hover'" @click.stop="onClick" :style="{fontSize:fontSize,margin:margin,width:width,height:height,borderRadius:parseInt(height)/2+'rpx',backgroundColor:bgColor,color:color,border:border,borderColor:borderColor}">
		<slot></slot>
	</view>

</template>

<script setup lang="ts">
	import {ref,onMounted,watch} from "vue";
	defineProps({
		// 	timeShow: {
		// 	    type: Boolean,
		// 	    default: function(){
		// 			return false;
		// 		}
		// 	},
		margin: {
			type: String,
			default: '0rpx'
		},
		width: {
			type: String,
			default: '686rpx'
		},
		height: {
			type: String,
			default: '88rpx'
		},
	    fontSize: {
		    type: String,
		    default: '32rpx'
		},
		isGradient: {
		    type: Boolean,
		    default: true
		},
		isDGradient: {
		    type: Boolean,
		    default: false
		},
		isYGradient: {
		    type: Boolean,
		    default: false
		},
		isBGradient: {
		    type: Boolean,
		    default: false
		},
		bgColor: {
		     type: String
		},
		border: {
		     type: String
		},
		borderColor: {
		     type: String
		},
		color: {
		     type: String
		}
	})

//-----------------------------------data------------------------



//--------------------------------onMounted----------------------

	// onMounted(()=>{

	// })

//-----------------------------------watch-----------------------

	// watch(height2,(newValue,oldValue)=>{
	// 	console.log(oldValue,'oldValue')
	// 	console.log(newValue,'newValue')
	// });

//-----------------------------------function--------------------

// import {getCurrentInstance} from "vue";
// const instance = getCurrentInstance();
// instance.emit('event')


const emits = defineEmits(['click'])
// const onClick = (event) => {
//   emit('handleLogin', event.target.value.toUpperCase())
// }
const onClick = () => {
  emits('click')
}



</script>

<style scoped lang="scss">
.btn-gradient,.btn-yellow-gradient,.btn-brown-gradient,.btn-Deep-blue-gradient{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
}

.btn-gradient{
	background-color: #00CBFF;
	background-image: linear-gradient(90deg, #00CBFF 0%, #0080FF 100%);
}
.btn-gradient-hover{background-color: #44B5EF;}

.btn-yellow-gradient{
	background-color: #FFE9C9;
	background-image: linear-gradient(90deg, #FFE9C9 0%, #FFBF8D 100%);
	}
.btn-yellow-gradient-hover{background-color: #FFE9C9;}

.btn-brown-gradient{
	background-color: #FCDEAA;
	background-image: linear-gradient(90deg, #FCDEAA 0%, #D4B57E 100%);
	}
.btn-brown-gradient-hover{background-color: #FCDEAA;}

.btn-Deep-blue-gradient{background-color: #5D9AFF;
	background-image: linear-gradient(90deg, #5D9AFF 0%, #0059EC 100%);
	}
.btn-Deep-blue-gradient-hover{background-color: #5D9AFF;}
.btn{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	color: #222222;
	border: 1rpx solid #999999;
	}
.btn-hover{background-color: #ddd;}

</style>
